<template>
  <div class="wrapper">
    <div class="portrait">
      <img class="portrait__img" src="@/assets/navicons/edit.png" alt="" />
    </div>
    <div class="inp">
      <input
        class="inp__val"
        type="text"
        placeholder-class="plc"
        placeholder="请输入用户名"
        v-model="regiData.username"
      />
    </div>
    <div class="inp">
      <input
        class="inp__val"
        type="text"
        placeholder-class="plc"
        placeholder="请输入密码"
        v-model="regiData.password"
      />
    </div>
    <div class="inp">
      <input
        class="inp__val"
        type="text"
        placeholder-class="plc"
        placeholder="请输入密码"
        v-model="regiData.pswAgain"
      />
    </div>
    <div class="btn" @click="handleRegister">注册</div>
    <div class="addInfo">
      <p class="regi" @click="handleLogin">已有账号去登陆</p>
    </div>
  </div>
  <Toast v-if="toastData.isShow" :msg="toastData.msg" />
</template>

<script>
import { reactive } from "vue";
import { instanceRQ, post } from "@/API/axios.js";
import { useRouter } from "vue-router";
import Toast, { toastEffect } from "@/components/Toast";

const RegiEffect = (showToast) => {
  const router = useRouter();
  let regiData = reactive({
    username: "",
    password: "",
    pswAgain: "",
  });

  const handleRegister = async () => {
    //校验
    if (regiData.password !== regiData.pswAgain) {
      showToast("请密码保持一致", 1500);
      return;
    }
    if (!regiData.password || !regiData.username) {
      showToast("请输入完整用户名称及密码", 1500);
      return;
    }
    try {
      const res = await post("/api/user/register", {
        username: regiData.username,
        password: regiData.password,
      });
      if (res.errno === 0) {
        showToast("成功");
        router.push({ name: "login" });
      } else {
        showToast("注册失败");
      }
    } catch (error) {
      showToast(String(error));
    }
  };

  return {
    regiData,
    handleRegister,
  };
};

const loginEffect = () => {
  const router = useRouter();
  // 跳转login
  const handleLogin = () => {
    router.push({ name: "login" });
  };
  return { handleLogin };
};

export default {
  name: "Register",
  components: { Toast },
  setup() {
    //toast相关
    const { toastData, showToast } = toastEffect();

    //register相关
    const { regiData, handleRegister } = RegiEffect(showToast);
    const { handleLogin } = loginEffect();

    return { regiData, handleRegister, toastData, handleLogin };
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.plc {
  font-size: 0.16rem;
  color: $plc-color;
  letter-spacing: 0;
  line-height: 0.24rem;
}
.wrapper {
  width: 100%;
  margin: 0 auto;
}
.portrait {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1.2rem;
  margin-bottom: 0.4rem;
  &__img {
    height: 0.66rem;
    width: 0.66rem;
  }
}

.inp {
  width: 2.95rem;
  height: 0.48rem;
  background-color: #f9f9f9;
  margin: 0 auto 0.16rem auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.06rem;
  &__val {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    background: none;
    border: none;
    padding: 0 0.16rem;
    font-size: 0.16rem;
    color: $plc-color;
    letter-spacing: 0;
    line-height: 0.24rem;
  }
}

.btn {
  width: 2.95rem;
  height: 0.48rem;
  margin: 0.32rem auto 0.16rem auto;
  background: #0091ff;
  box-shadow: 0 4px 8px 0 rgba(0, 145, 255, 0.32);
  border-radius: 0.04rem;
  color: #fff;
  font-size: 0.16rem;
  letter-spacing: 0;
  text-align: center;
  line-height: 0.48rem;
}

.addInfo {
  height: 0.2rem;
  width: 100%;
  display: flex;
  justify-content: center;
  .regi {
    font-size: 0.14rem;
    color: rgba(0, 0, 0, 0.5);
    letter-spacing: 0;
  }
}
</style>
